<template>
	<div id="goodsdil">
		<van-icon name="arrow-left" size="0.5rem" class="quit" @click="$router.go(-1)" />
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
			<van-swipe-item v-for="(item,index) in good.detail.imgs" :key="index">
				<img :src="item">
			</van-swipe-item>
		</van-swipe>
		<div class="des">
			<h2>{{good.detail.title}}</h2>
			<h3><span>【换新推荐 Top {{good.detail.old2new.ranking}}】</span> {{good.detail.seb_title+" "+good.seb_name}}</h3>
			<p class="act">（下单立省500元<span v-if="good.detail.old2new.state">，参与以旧换新，还可再省？？？元</span>！）</p>
			<div class="old2new" v-if="good.detail.old2new.state">
				<span>以旧换新（第{{good.detail.old2new.stage}}期)</span>
				<span>立即参与></span>
			</div>
			<div class="price">
				<p>￥{{good.price}}</p>
				<van-stepper v-model="num" theme="round" button-size="22" disable-input />
				<span>总销量{{good.paid_num}}</span>
			</div>
		</div>

		<div class="comments">
			<header>
				<p>商品评价</p>
				<van-icon name="arrow" size="0.24rem" @click="$router.push('/comment').catch(() =>{})" />
			</header>
			<div class="contain">
				<img src="../../public/img/list_2.png"><span>{{good.comments[good.comments.length-1].auth}}</span>
				<van-rate v-model="good.comments[good.comments.length-1].start" readonly />
				<time>时间：{{good.comments[good.comments.length-1].time}}</time>
				<p>{{good.comments[good.comments.length-1].contain}}</p>
			</div>
		</div>
		<div class="dil_imgs">
			<img v-for="(item,index) in good.detail.del_imgs" :src="item" :key="index">
		</div>
		<van-goods-action class="footer">
			<van-goods-action-icon icon="wap-home-o" text="首页" to="/home" />
			<van-goods-action-icon icon="service-o" text="客服" to="/service" />
			<van-goods-action-icon icon="shopping-cart-o" text="购物车" to="/cart" />
			<van-goods-action-button type="warning" text="加入购物车" @click="addToCart" />
			<van-goods-action-button type="danger" text="立即购买" />
		</van-goods-action>
	</div>
</template>

<script>
	export default {
		name: "goodsdil",
		data() {
			return {
				good: this.$route.query.data,
				num: 1,
			}
		},
		methods: {
			addToCart() {
				let username = ""
				if (JSON.parse(window.localStorage.getItem('user'))) {
					username = JSON.parse(window.localStorage.getItem('user')).data.username
				} else {
					this.$toast("你还没有登陆，先登陆吧")
					this.$router.push("/login").catch(() => {})
				}
				let good = {
					proid: this.good.proid,
					img: this.good.tit_img[0],
					title: this.good.name,
					price: this.good.price,
					des: this.good.seb_name,
					_id: this.$route.params.id,
					flag: false
				}
				this.$axios({
					url: "/cart/add",
					method: "post",
					data: {
						username,
						good: JSON.stringify(good),
						num: this.num
					}
				}).then(res => {
					if (res.err === 0) {
						this.$toast(res.msg);
					} else {
						this.$toast("网络开小差了，再试一次吧");
					}
				})
			}
		},
	}
</script>


<style scoped="scoped">
	.quit {
		position: absolute;
		top: 0.2rem;
		left: 0.2rem;
		z-index: 1;
		border-radius: 0.4rem;
		background-color: rgba(255, 255, 255, 0.3);
	}

	.my-swipe .van-swipe-item {
		color: #fff;
		text-align: center;
		float: left;
	}

	.my-swipe .van-swipe-item img {
		width: 100%;
	}

	.notice-swipe {
		height: 40px;
		line-height: 40px;
	}

	.des {
		padding: 0.1rem;
		background-color: #fff;
	}

	.des h2 {
		margin-top: 0.1rem;
	}

	.des h3 {
		font-size: 0.23rem;
		margin-top: 0.16rem;
	}

	.des h3 span {
		color: red;

	}

	.des .act {
		color: red;
		font-size: 0.21rem;
		margin-top: 0.16rem;
	}

	.des .old2new {
		display: flex;
		justify-content: space-between;
		background-color: red;
		font-size: 0.22rem;
		color: white;
		padding: 0.15rem;
		border-radius: 0.15rem;
		margin-top: 0.6rem;
	}

	.des .price {
		display: flex;
		justify-content: space-between;
		padding: 0.2rem;
		font-size: 0.23rem;
		line-height: 0.4rem;
	}

	.des .price p {
		color: red;
		font-size: 0.3rem;
	}

	.comments {
		margin-top: 0.2rem;
		margin-bottom: 0.2rem;
		font-size: 0.24rem;
		background-color: #fff;
		overflow: hidden;
	}

	.comments header {
		padding: 0.2rem;
		display: flex;
		justify-content: space-between;
	}

	.comments .contain img {
		float: left;
		margin: 0.2rem;
		width: 0.7rem;
	}

	.comments .contain span {
		line-height: 1.2rem;
		margin-right: 0.2rem;
	}

	.comments .contain time {
		display: block;
		margin-left: 0.2rem;
		font-size: 0.2rem;
		color: #999;
	}

	.comments .contain p {
		padding: 0.2rem;
		margin-left: 0.2rem;
		color: #666;
	}



	.dil_imgs {
		font-size: 0;
		padding-bottom: 1rem;
	}

	.dil_imgs img {
		width: 100vw;
	}

	.footer {
		border-top: 1px solid #bbb;
		padding-top: 0.1rem;
	}
</style>
